<template>
	<div id="search_box">
		<van-search 
		class="inp_box" 
		v-model="value" 
		shape="round" 
		placeholder="搜索歌曲、歌手、专辑" 
		@search="toResult(value)" 
		@input="toUnderway(value),set_val()"
		@clear="toStart()"
		/>
		<router-link to="/start"></router-link>
		<router-view></router-view>
		
	</div>
</template>
<script>
	import { mapMutations, mapGetters } from 'vuex';

	export default {
		data() {
			return {
				value: '',
			};
		},
		watch:{
			val(){
				this.value = this.val;
				if(this.value == ""){
					this.toStart();
				}
			}
		},
		computed:{
			...mapGetters(["val"]),
		},
		methods: {
			...mapMutations({
				set_val(){
					this.$store.commit("set_val",this.value);
				}
			}),
			toResult(keyword) {
				this.$router.push({
					path:'/search/result',
					query:{
						songName:keyword
					}
				})
			},
			toUnderway(keyword) {
				this.$router.push({
					path:'/search/underway',
					query:{
						keyword:keyword
					}
				})
			},
			toStart(){
				this.$router.push({
					name:"search"
				})
			}
		}
	};
</script>


<style lang="scss">
		* {
			box-sizing: border-box;
			// letter-spacing: 2px;
		}
		#search_box {
			width: 100vw;
			min-height: calc(100vh - 119px);
			background-color: #fdfdfd;
			overflow: hidden;
            padding-bottom: 66px;
            margin-top: 119px;
			.inp_box {
				padding: 15px;
				background-color: #fdfdfd;
				border-bottom: 1px solid #f0f0f0;
			}
			.van-search__content {
				background-color: #f3f3f3;
			}
			input::-webkit-input-placeholder {
				color: #aaa;
			}
		}
		
		
</style>
